<template>
  <div class="app-container2">
    <!--工具栏-->
    <div class="head-container">
      <content-block label="查询条件">

        <el-input v-model="queryaac001" clearable placeholder="请输入人员编号查询" style="width: 40%;" class="filter-item" />
        <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="toQuery">搜索</el-button>
        <el-button  class="filter-item" size="mini" type="warning" icon="el-icon-refresh-left" @click="resetQuery">重置</el-button>

      </content-block>

      <!--表单组件-->
      <el-dialog  width="65%" :visible.sync="dialog_id40" :title="dialogTitile">
        <content-block label="人员信息">
          <person-rpc ref="personRpc" @personRpcCallBack="personRpcCallBack" />
          <el-button type="primary" @click="search">查询</el-button>
          <el-descriptions title="" >
            <el-descriptions-item label="用户名">kooriookami</el-descriptions-item>
            <el-descriptions-item label="手机号">18100000000</el-descriptions-item>
            <el-descriptions-item label="居住地">苏州市</el-descriptions-item>
            <el-descriptions-item label="备注">
              <el-tag size="small">学校</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="联系地址">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
          </el-descriptions>
        </content-block>
        <content-block label="年金账户明细信息">
        <el-form ref="id40form" :model="id40form"  size="small" label-width="80px">
          <el-form-item label="主键" prop="aaz415" v-show="false" label-width="180px">
            <el-input v-model="id40form.aaz415" style="width: 370px;" />
          </el-form-item>

          <el-form-item label="个人编号" v-show="false" label-width="180px">
            <el-input v-model="id40form.aac001" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="参保关系ID" v-show="false" label-width="180px">
            <el-input v-model="id40form.aaz159" style="width: 370px;" />
          </el-form-item>
          <el-col span="12">
          <el-form-item label="职业年金总额" label-width="180px" >
            <el-input-number v-model="id40form.aie074" size="medium"  :precision="2" :step="0.1" min="0" style="width: 70%" disabled/>
          </el-form-item>
          </el-col>
          <el-col span="12">
          <el-form-item label="记账金额" label-width="180px" :rules="[ { required: true, message: '记账金额'},]">
            <el-input-number v-model="id40form.aae240" size="medium"  :precision="2" :step="0.1" min="0" style="width: 70%" @change="changeAae240"/>
          </el-form-item>
          </el-col>
          <el-col span="12">
          <el-form-item label="实账金额" label-width="180px" :rules="[ { required: true, message: '实账金额'},]">
            <el-input-number v-model="id40form.aae252" size="medium"  :precision="2" :step="0.1" min="0" style="width: 70%" @change="changeAae252"/>
          </el-form-item>
          </el-col>
          <el-col span="12">
          <el-form-item label="补记的职业年金金额" label-width="180px" :rules="[ { required: true, message: '补记的职业年金金额'},]">
            <el-input-number v-model="id40form.aic290" size="medium"  :precision="2" :step="0.1" min="0" style="width: 70%" @change="changeAic290"/>
          </el-form-item>
          </el-col>
          <el-col span="12">
          <el-form-item label="改革前试点划转金额" label-width="180px" :rules="[ { required: true, message: '改革前试点划转金额'},]">
            <el-input-number v-model="id40form.aic005" size="medium"  :precision="2" :step="0.1" min="0" style="width: 70%" @change="changeAic005"/>
          </el-form-item>
          </el-col>
          <el-col span="12">
          <el-form-item label="企业年金金额" label-width="180px" :rules="[ { required: true, message: '企业年金金额'},]">
            <el-input-number v-model="id40form.aae019" size="medium"  :precision="2" :step="0.1" min="0" style="width: 70%" @change="changeAae019"/>
          </el-form-item>
          </el-col>
          <el-col span="12">
          <el-form-item label="有效标识" label-width="180px" v-show="false">
            <el-input v-model="id40form.aae100"  />
          </el-form-item>
          </el-col>
          <el-col span="24">
          <el-form-item label="备注" label-width="180px">
            <el-input type="textarea" v-model="id40form.aae013" style="width: 88%;height: 20%" />
          </el-form-item>
          </el-col>
        </el-form>
        </content-block>
        <div slot="footer" class="dialog-footer">
          <el-button type="text" @click="cancelCU">取消</el-button>
          <el-button  type="primary" @click="submitCU">确认</el-button>
        </div>
      </el-dialog>
      <!--表格渲染-->
      <content-block label="年金账户信息">
        <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->

        <el-button
          class="filter-item"
          size="mini"
          type="primary"
          icon="el-icon-plus"
          @click="toAdd"
        >
          新增
        </el-button>
        <el-button
          class="filter-item"
          size="mini"
          type="success"
          icon="el-icon-edit"
          :disabled="this.selectedRows.length !== 1"
          @click="toEdit"
        >
          修改
        </el-button>
        <el-button
          class="filter-item"
          type="danger"
          icon="el-icon-delete"
          size="mini"
          :disabled="this.selectedRows.length == 0"
          @click="deletebatch"
        >
          删除
        </el-button>
<!--        <el-button-->
<!--          class="filter-item"-->
<!--          size="mini"-->
<!--          type="warning"-->
<!--          icon="el-icon-download"-->
<!--          @click="doExport"-->
<!--        >导出</el-button>-->
      <el-table ref="table" v-loading="tableloding"  :data="tableData" size="small" border style="width: 100%;" height="560px" :header-cell-style="{background:'#f5f7fa', color:'#777'}" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
<!--        <el-table-column prop="aaz415" label="主键" />-->
        <el-table-column prop="aac001" label="个人编号" align="center" header-align="center" width="180px" fixed="left"/>
<!--        <el-table-column prop="aaz159" label="参保关系ID" />-->
        <el-table-column label="职业年金金额" align="center" header-align="center">
        <el-table-column prop="aie074" label="总额" align="center" header-align="center" width="150px" />
        <el-table-column prop="aae240" label="记账金额" align="center" header-align="center" width="150px"/>
        <el-table-column prop="aae252" label="实账金额" align="center" header-align="center" width="150px"/>
        <el-table-column prop="aic290" label="补记金额" align="center" header-align="center" width="150px"/>
        <el-table-column prop="aic005" label="改革前试点划转金" align="center" header-align="center" width="150px" />
        <el-table-column prop="aae019" label="企业年金" align="center" header-align="center" width="150px" />
        </el-table-column>
        <el-table-column prop="aae100" label="有效标识" align="center" header-align="center" width="150px"/>
        <el-table-column prop="aae013" label="备注" align="center" header-align="center" width="150px" />
        <el-table-column prop="aae011" label="经办人" align="center" header-align="center" width="150px"/>
        <el-table-column prop="aae036" label="经办时间" align="center" header-align="center" width="150px"/>
        <el-table-column prop="aab359" label="经办机构" align="center" header-align="center" width="150px"/>
                    <el-table-column
                      fixed="right"
                      label="操作"
                      align="center"
                      header-align="center"
                      width="150">
                      <template slot-scope="scope">
                        <el-button  type="primary" icon="el-icon-edit" size="mini"  @click="edit(scope.row)"/>
                        <el-button   type="danger" icon="el-icon-delete" size="mini" @click="deletes(scope.row)" />
                      </template>
                    </el-table-column>
      </el-table>
      <!--分页组件-->
        <el-pagination

          :page-size.sync="page.size"
          :total="page.total"
          :current-page.sync="page.page"
          style="margin-top: 8px;float: right"
          layout="total, prev, pager, next, sizes"
          @size-change="sizeChangeHandler"
          @current-change="pageChangeHandler">
        </el-pagination>
      </content-block>
    </div>
  </div>
</template>

<script>
import crudAccountId40 from '@/views/ynsb_comm/id40/js/accountId40'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation'
import pagination from '@crud/Pagination'
import contentBlock from '@/components/labers/contentBlock.vue'
import PersonRpc from '@/views/ynsb_comm/comm/module/personRpc.vue'
import crudBasicAc01 from '@/views/ynsb_comm/ac01/basicAc01'
import { downloadFile } from '@/utils'

const defaultForm = { aaz415: null, aac001: null, aaz159: null, aie074: null, aae240: null, aae252: null, aic290: null, aic005: null, aae019: null, aae100: null, aae013: null, aae011: null, aae036: null, aab359: null, aaz002: null }
export default {
  name: 'AccountId40',
  components: { PersonRpc, contentBlock, pagination, crudOperation, rrOperation, udOperation },
  data() {
    return {
      permission: {
        add: ['admin', 'accountId40:add'],
        edit: ['admin', 'accountId40:edit'],
        del: ['admin', 'accountId40:del']
      },
      queryTypeOptions: [
        { key: 'aac001', display_name: '个人编号' }
      ],
      searchForm: {
        aac001: '', // 人员编号
        aac003: '' // 姓名
      },
      cardPerson:[],//人员参保信息

      id40form:{
        aaz415:"",
        aac001:"",
        aaz159:"",
        aie074:"",
        aae240:"",
        aae252:"",
        aic290:"",
        aic005:"",
        aae019:"",
        aae100:"",
        aae013:"",
      },

      aie074: 0,
      aae240: 0,
      aae252: 0,
      aic290: 0,
      aic005: 0,
      aae019: 0,
      dialog_id40:false,
      dialogTitile:"",
      type:"",
      aaz159:"",
      aac001:"",
      selectedRows: [] , // 存储选中的行数据
      tableData:[],
      queryaac001:"",
      page:{
        //页码
        page:0,
        //每页数据条数
        size:10,
        //总数
        total:0
      },
    }
  },
  methods: {

    personRpcCallBack(item) {
      this.searchForm = {
        aac001: item.aac001,
        aac003: item.aac003
      }
    },
    search() {
      // 假设查询的数据
      if (this.searchForm.aac001 !== '' && this.searchForm.aac001 !== null) {
        crudBasicAc01.getAc01Ac02({ ...this.searchForm }).then(res => {
          this.cardPerson=res
          let filteredValues = this.cardPerson.filter(item => item.aae140 === "180" && item.aac008==='1')
          if(filteredValues.length==0){
            this.$message('未查询到该人员职业年金有效参保信息');
            return
          }
          this.aaz159=filteredValues[0].aaz159
          this.aac001=filteredValues[0].aac001
          crudAccountId40.getId40({ aaz159:filteredValues[0].aaz159 }).then(res2 => {
            let ls=res2
            if(ls.length>0){
              this.$message('该人员已经存在有效的年金账户信息，请勿重复添加');
              return
             }
            })
          })

        }
      },

    changeAae240: function (value) {
      this.aae240 = value
      this.aie074 = this.aae240 + this.aae252 + this.aic290 + this.aic005 + this.aae019
      this.id40form.aie074=this.aie074
    },
    changeAae252: function (value) {
      this.aae252 = value
      this.aie074 = this.aae240 + this.aae252 + this.aic290 + this.aic005 + this.aae019
      this.id40form.aie074=this.aie074
    },
    changeAic290: function (value) {
      this.aic290 = value
      this.aie074 = this.aae240 + this.aae252 + this.aic290 + this.aic005 + this.aae019
      this.id40form.aie074=this.aie074
    },
    changeAic005: function (value) {
      this.aic005 = value
      this.aie074 = this.aae240 + this.aae252 + this.aic290 + this.aic005 + this.aae019
      this.id40form.aie074=this.aie074
    },
    changeAae019: function (value) {
      this.aae019 = value
      this.aie074 = this.aae240 + this.aae252 + this.aic290 + this.aic005 + this.aae019
      this.id40form.aie074=this.aie074
    },
    toAdd(){
      this.id40form ={}
      this.type="add"
      this.dialogTitile="新增职业年金账户信息"
      this.dialog_id40=true
    },

    toEdit(){
      if(this.selectedRows.length>1){
        this.$notify({
          title: '只能选择一条数据进行编辑',
          type: 'error'
        });
      }
      this.type="edit"
      this.dialogTitile="编辑职业年金账户信息"
      this.dialog_id40=true
      this.selectedRows
      this.id40form = this.selectedRows[0]

    },
    edit(row){

      this.type="edit"
      this.dialogTitile="编辑职业年金账户信息"
      this.dialog_id40=true
      this.selectedRows.push(row)
      this.id40form = this.selectedRows[0]

    },

    cancelCU(){
      this.dialog_id40=false
    },
    submitCU(){

      if(this.type=="add"){



          this.$refs.id40form.validate(valid => {
            if (valid) {

              let data=this.id40form
              data.aaz159=this.aaz159
              data.aac001=this.aac001

              crudAccountId40.add(JSON.stringify(data)).then(res => {
                this.$notify({
                  title: '保存成功',
                  type: 'success'
                });
                this.dialog_id40=false
                this.toQuery()
              })

            }
          });



        }else{
        this.$refs.id40form.validate(valid => {
          if (valid) {

            let data=this.id40form

            crudAccountId40.edit(JSON.stringify(data)).then(res => {
              this.$notify({
                title: '保存成功',
                type: 'success'
              });
              this.dialog_id40=false
              this.toQuery()
            })

          }
        });


      }

    },

    // 监听选中变化
    handleSelectionChange(val) {
      this.selectedRows = val
    },

    toQuery(){

      this.tableloding=true
          let data={}
          data.aac001=this.queryaac001
          data.page=this.page.page-1
          data.size=this.page.size
          crudAccountId40.get(JSON.stringify(data)).then(res => {
            this.tableData=res.content
            this.page.total=res.totalElements
            this.tableloding=false
          })




    },
    resetQuery(){
      this.queryaac001=""
    },


    // 当前页改变
    pageChangeHandler(e) {
      this.page.page = e
      this.toQuery()
    },
    // 每页条数改变
    sizeChangeHandler(e) {
      this.page.size = e
      this.page.page = 1
      this.toQuery()
    },
    // 预防删除第二页最后一条数据时，或者多选删除第二页的数据时，页码错误导致请求无数据
    dleChangePage(size) {
      if (this.tableData.length === size && this.page.page !== 1) {
        this.page.page -= 1
      }
    },

    deletes(row) {
      this.selectedRows = row
      this.$confirm('是否确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteiId40()
      }).catch(() => {

      })
    },


    deletebatch() {
      if(this.selectedRows.length==0){
        this.$message('请选择要删除的数据');
        return
      }

      this.$confirm('是否确认删除选中数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteiId40()
      }).catch(() => {

      })
    },

    deleteiId40(){

      crudAccountId40.del(JSON.stringify(this.selectedRows)).then(res => {
        this.$notify({
          title: '删除成功',
          type: 'success'
        });
        this.toQuery()
      })
    },

    doExport(){

      crudAccountId40.download().then(result => {
        downloadFile(result,  '职业年金账户数据', 'xlsx')
      })
    },






    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
    [CRUD.HOOK.beforeRefresh]() {
      return true
    }
  }
}
</script>

<style scoped>

</style>
